<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法2 事件绑定</title>
    <script src="http://unpkg.com/vue@3"></script>
</head>
<body>
    <id="app">
        <h1>知识点一：v-on指令：鼠标单击事件</h1>
            <p>我已经被你点击了{{num}}次</p>
            <button v-on：click="num++">点我点我</button>
            <button v-on：click="num--">点我点我减！</button>
            <h3>许多事件处理逻辑会更加复杂，所以在复杂的逻辑中，直接把代码放在v-on指令中是不合适的
                因此，对于复杂事件，可以把代码放置在方法中，然后进行调用
            </h3>
            <button v-on:click="logInfo()">打印消息</button>
            <button v-on:click="logInfo('我好开心！')">打印带参数消息</button>
            <h3>v-on:click可以简写成@click</h3>
            <button @click="logInfo('我在学习vue')">打印带参数消息</button>
        <h1>知识点2：键盘事件keyup，keydown</h1>
            <h3>keyup事件 释放任意键 keydown 按下任意键触发</h3>
            <input type="text" @keyup="show('我被释放了！')">    
            <input type="text" @keydown="show('我被按下了！')"> 
        <h1>知识点3：其他事件dbclick双击事件，contextmenu右击事件，mouseover鼠标上移事件，mouseout鼠标移开
        </h1>
            <button @dbclick="num++">双击点我</button>
            <button @contextmenu="num++">鼠标右击</button>
            <button @mouseover="num++">鼠标上移</button>
            <button @mouseout="nun++">鼠标移开</button>
        <h1>知识点4：事件修饰符</h1>
            <h3>1.once 事件修饰符  表示该事件只能被点击一次</h3>
            <button @click="num++">相信我，你只能被点击一次</button>
            <h3>2.prevent 事件 当事件触发时，阻止元素默认的行为</h3>
            <h4>submit有一个默认的行为，提交后会重新加载页面，通过prevent可以阻止默认行为</h4>
            <form @submit="handleSubmit()">
                <h5>不用修饰符</h5>
                <button type="submit">提交</button>
            </form>
            <form @submit.prevent="handleSubmit()">
                <h5>使用修饰符</h5>
                <button type="submit">提交</button>
            </form>
            <h3>3.stop事件 阻止冒泡</h3>
            <h4>冒泡是内部元素事件触发后，继续向外层触发事件</h4>
            <div id="box1" @click="box('我是box1')">box1
                <div id="box2" @click="box('我是box2')">box2
                    <div id="box3" @click="box('我是box3')">
                        box3
                    </div>
                </div>
            </div>
        <h3>4.capture事件捕获</h3>
            <h4>如果我们在层叠事件中想要先执行某个事件，可以使用capture修饰符
                它是当内部的元素触发时，先处理capture事件修饰符的事件，然后在提交当前事件执行
                捕获的顺序是由外到内
            </h4>
            <div id="box1" @click.capture="box('我是box1')">box1
                <div id="box2" @click.capture="box('我是box2')">box2
                    <div id="box3" @click="box('我是box3')">
                        box3
                    </div>
                </div>
            </div>
        <h5>5.self只绑定了事件的那个对象层中使用</h5>
        <div id="box1" @click="box('我是box1')">box1
            <div id="box2" @click.self="box('我是box2')">box2
                <div id="box3" @click="box('我是box3')">
                    box3
                </div>
            </div>
        </div>
        <h3>6.监听键盘事件的按键修饰符</h3>
            <p>.enter  .tab   .delete(监听删除键和退格键)  .esc  .space .up. down
                .left .right .ctrl .alt .shift  .meta(windows的徽标键)
            </p>
            <h4>alt+c</h4>
            <input @keyup.alt.c=show('jjijijijiji')>
        <h3>7.鼠标修饰符</h3>
            <p>.left  .right  .middle</p>



    </div>
    
</body>
</html>
<script>
    const appConn=Vue.createApp({
        data() {
            return {
                num:0
            }
        },
        methods: {
            logInfo(val){
                console.log(val||"我的vue页面，你好！");
            },
            show(val){
                console.log(val);
            },
            handleSubmit(){

            },
            box(val){
                alert(val)
            }    
        },
    }).mount("#app")
</script>

<style>
    #box1{
        height: 200px;
        width:300px;
        background: #ee4d4d;
    }
    #box2{
        height: 150px;
        width:250px;
        background: #ee4999;
    }
    #box3{
        height: 100px;
        width:200px;
        background: #234556;
    }
</style>